<style rel="stylesheet/less" lang="less" scoped>

.modal-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .5);
    z-index: 5000;
}

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix {
    _overflow: hidden;
}

.fright {
    float: right;
}

button,
.button {
    background-color: #fff;
    border: 1px solid #d3d6db;
    border-radius: 3px;
    color: #222324;
    font-size: 14px;
    height: 32px;
    line-height: 24px;
    padding: 8px 10px;
    position: relative;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    &:hover {
        color: #222324;
        border-color: #aeb1b5;
    }
}

.modal-ct {
    position: fixed;
    background-color: #fff;
    width: 640px;
    // border-radius: 5px;
    z-index: 5001;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    .modal-ct-head {
        position: relative;
        padding: 15px;
        // background-color: #f5f7fa;
        background-color: #fff;
        border-bottom: 1px solid #d3d6db;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        .delete {
            -webkit-appearance: none;
            background-color: rgba(18, 18, 18, 0.2);
            border: none;
            border-radius: 100%;
            cursor: pointer;
            display: inline-block;
            height: 24px;
            width: 24px;
            position: absolute;
            top: 15px;
            right: 10px;
            &:before {
                background-color: #fff;
                content: "";
                display: block;
                height: 2px;
                left: 50%;
                margin-left: -25%;
                margin-top: -1px;
                position: absolute;
                top: 50%;
                width: 50%;
                -webkit-transform: rotate(45deg);
                transform: rotate(45deg);
            }
            &:after {
                background-color: #fff;
                content: "";
                display: block;
                height: 2px;
                left: 50%;
                margin-left: -25%;
                margin-top: -1px;
                position: absolute;
                top: 50%;
                width: 50%;
                -webkit-transform: rotate(-45deg);
                transform: rotate(-45deg);
            }
            &:hover {
                background-color: rgba(17, 17, 17, 0.5);
            }
        }
        .modal-ct-title {
            color: #222324;
            font-size: 20px;
            line-height: 1;
            margin: 0;
            padding: 0;
        }
    }
    .modal-ct-body {
        max-height: 450px;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 20px;
    }
    .modal-ct-foot {
        position: relative;
        padding: 15px;
        // background-color: #f5f7fa;
        background-color: #fff;
        border-top: 1px solid #d3d6db;
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
        .actions {
            position: absolute;
            right: 15px;
            top: 15px;
        }
        .is-primary {
            // background-color: #1fc8db;
            background-color: #37CA73;
            border-color: transparent;
            color: #fff;
            margin-left: 5px;
            &:hover {
                // background-color: #199fae;
                background-color: #53C773;
                border-color: transparent;
                color: #fff;
            }
        }
        .button {
            min-width: 70px;
        }
    }
}

@media screen and (max-width: 768px) {
  .modal-ct{
    width: 100%;
    width: 100vw;
  }
}

.bounce-transition {
    -webkit-animation-duration: .5s;
    animation-duration: .5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.bounce-enter {
    animation-name: bounceIn;
}

.bounce-leave {
    animation-name: bounceOut;
}

@-webkit-keyframes bounceIn {
    from,
    20%,
    40%,
    60%,
    80%,
    to {
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }
    0% {
        opacity: 0;
        transform: scale3d(.3, .3, .3);
    }
    20% {
        transform: scale3d(1.1, 1.1, 1.1);
    }
    40% {
        transform: scale3d(.9, .9, .9);
    }
    60% {
        opacity: 1;
        transform: scale3d(1.03, 1.03, 1.03);
    }
    80% {
        transform: scale3d(.97, .97, .97);
    }
    to {
        opacity: 1;
        transform: scale3d(1, 1, 1);
    }
}

@keyframes bounceIn {
    from,
    20%,
    40%,
    60%,
    80%,
    to {
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }
    0% {
        opacity: 0;
        transform: scale3d(.3, .3, .3);
    }
    20% {
        transform: scale3d(1.1, 1.1, 1.1);
    }
    40% {
        transform: scale3d(.9, .9, .9);
    }
    60% {
        opacity: 1;
        transform: scale3d(1.03, 1.03, 1.03);
    }
    80% {
        transform: scale3d(.97, .97, .97);
    }
    to {
        opacity: 1;
        transform: scale3d(1, 1, 1);
    }
}

@-webkit-keyframes bounceOut {
    20% {
        transform: scale3d(.9, .9, .9);
    }
    50%,
    55% {
        opacity: 1;
        transform: scale3d(1.1, 1.1, 1.1);
    }
    to {
        opacity: 0;
        transform: scale3d(.3, .3, .3);
    }
}

@keyframes bounceOut {
    20% {
        transform: scale3d(.9, .9, .9);
    }
    50%,
    55% {
        opacity: 1;
        transform: scale3d(1.1, 1.1, 1.1);
    }
    to {
        opacity: 0;
        transform: scale3d(.3, .3, .3);
    }
}

</style>

<template>

<div>
    <div v-show="value" class="modal-bg" @click="onBgClick" :style="bgStyle"></div>
    <div ref="content" class="modal-ct" v-show="value" :transition="transition" :style="[contentStyle,ctStyle]">
        <header v-if="!onlyBody" class="modal-ct-head">
            <p class="modal-ct-title">{{ title }}</p>
            <button class="delete" @click="hide"></button>
        </header>
        <section class="modal-ct-body" :style="bodyStyle">
            <slot></slot>
        </section>
        <footer v-if="!onlyBody" class="modal-ct-foot clearfix">
            <div class="fright">
                <a class="button" @click.prevent="cancel">{{ cancelText }}</a>
                <a class="button is-primary" @click.prevent="ok">{{ okText }}</a>
            </div>
        </footer>
    </div>
</div>

</template>

<script>

export default {
    props: {
        title: {
            type: String,
            default: '操作提示'
        },
        okText: {
            type: String,
            default: '确认'
        },
        cancelText: {
            type: String,
            default: '取消'
        },
        value: {
            type: Boolean,
            default: false
        },
        transition: {
            type: String,
            default: 'bounce'
        },
        verify: {
            type: Boolean,
            default: false
        },
        bgClick: {
            type: Boolean,
            default: true
        },
        onlyBody: {
            type: Boolean,
            default: false
        },
        bgStyle: {
            type: Object,
            default () {
                return {};
            }
        },
        contentStyle: {
            type: Object,
            default () {
                return {};
            }
        },
        bodyStyle: {
            type: Object,
            default () {
                return {};
            }
        },
        modalId: {
            type: Number,
            default: 0
        },
        topGap: {
            type: Number,
            default: 0
        },
        MODAL_CANCEL_EVENT: {
            type: Function
        },
        MODAL_OK_EVENT: {
            type: Function
        }
    },
    data() {
        return {
            ctStyle: {}
        }
    },
    watch: {
        value() {
            if (this.value) {
                this.computeStyle();
            }
        }
    },
    ready() {
        this.bind(window, "resize", function() {
            this.computeStyle();
        }.bind(this));
    },
    methods: {
        show() {
                this.$emit('input', true);
            },
            hide() {
                this.$emit('input', false);
            },
            onBgClick() {
                if (this.bgClick) {
                    this.hide();
                }
            },
            ok() {
                if (!this.verify) {
                    this.hide();
                }
                this.$emit('modal-ok-event', this.modalId)
            },
            cancel() {
                this.hide();
                this.$emit('modal-cancel-event', this.modalId)
            },
            computeStyle() {
                if (!this.$refs.content || !this.$refs.content.offsetHeight) {
                    return;
                }
                this.ctStyle = {
                    top: `${Math.max((window.innerHeight - this.$refs.content.offsetHeight) / 2 - this.topGap ,0)}px`,
                    left: `${Math.max((window.innerWidth - this.$refs.content.offsetWidth) / 2,0)}px`
                }
            },
            bind(el, eventName, fn) {
                if (window.addEventListener) {
                    el.addEventListener(eventName, fn, false);
                } else if (window.attachEvent) {
                    el.attachEvent("on" + eventName, fn);
                }
            }
    }
}

</script>
